<template>
  <div>
    <el-page-header @back="goBack" content="需求详情">
    </el-page-header>

    <el-divider></el-divider>

    <div>
      <el-descriptions :title="this.ruleForm.reqName">
        <el-descriptions-item label="提出者" span="1">{{this.ruleForm.nickname}}</el-descriptions-item>
        <el-descriptions-item label="所属项目" span="2">{{this.ruleForm.proName}}</el-descriptions-item>
        <el-descriptions-item label="负责人" span="1">{{this.ruleForm.distributed}}</el-descriptions-item>
        <el-descriptions-item label="提出时间" span="2">{{this.ruleForm.createDate}}</el-descriptions-item>
        <el-descriptions-item label="需求描述" span="3">{{this.ruleForm.reqDescription}}</el-descriptions-item>
      </el-descriptions>
    </div>

    <el-divider><span>建议</span></el-divider>

    <el-input
        type="text"
        placeholder="请输入内容"
        v-model="text"
        maxlength="20"
        show-word-limit
        style="width: 85%; margin-left: 1%"
    >
    </el-input>
    <el-button type="primary" @click="addReqProposal" style="width: 10%; margin-left: 3%">发表评论</el-button>
    <div>
      <el-table
          :data="reqProposal"
          style="width: 100%">
        <el-table-column
            prop="nickname"
            width="100">
        </el-table-column>
        <el-table-column
            prop="proposal">
        </el-table-column>
        <el-table-column
            prop="createDate"
            width="180">
        </el-table-column>
        <el-table-column width="50">
          <template slot-scope="scope">
            <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                size="mini"
                @click="openDeleteConfirm(scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          align="center"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="limits"
          layout="prev, pager, next, jumper"
          :total="count">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: '',
      count: 0,
      currentPage: 1,
      limits: 10,
      ruleForm: {},
      text: '',
      reqProposal: [],
      reqProp:{
        reqId: '',
        proposal: ''
      }
    };
  },
  methods: {
    goBack() {
      this.$router.push({path: '/req'})
    },
    /* 查询需求建议总数 */
    countReqProposal(id) {
      console.log('countReqProposal');
      let url = 'http://localhost:8989/reqProposals/' + id + '/count';
      console.log('url = ' + url);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.count = responseBody.data;
        console.log(this.count);
      })
    },
    /* 分页 */
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.loadKnowDis(this.id);
    },
    addReqProposal() {
      console.log("addReqProposal");
      let url = 'http://localhost:8989/reqProposals/insert';
      console.log('url = ' + url);
      this.reqProp.reqId = this.ruleForm.id;
      this.reqProp.proposal = this.text;
      let formData = this.qs.stringify(this.reqProp, {arrayFormat: 'repeat'});
      console.log('formData = ');
      console.log(formData);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url, formData).then((response) => {
        let responseBody = response.data;
        console.log('responseBody = ');
        console.log(responseBody);
        if (responseBody.state == 20000) {
          this.$message({
            message: '发表成功！',
            type: 'success',
          });
          this.loadReqProposal(this.id);
        } else {
          this.$message.error(responseBody.message);
        }
      })
    },
    /* 删除 */
    handleDelete(reqProposal) {
      let url = 'http://localhost:8989/reqProposals/' + reqProposal.id + '/delete';
      console.log('url = ' + url);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url).then((response) => {
        let responseBody = response.data;
        console.log(responseBody);
        if (responseBody.state != 20000) {
          this.$message.error(responseBody.message);
        }
        if (responseBody.state == 20000 || responseBody.state == 40400) {
          this.$message({
            message: '删除成功！',
            type: 'success',
          });
          this.loadReqProposal(this.id);
        }
      })
    },
    openDeleteConfirm(knowDis) {
      const message = '此操作将删除这条评论，是否继续？';
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = 'http://localhost:8989/knowsDis/' + knowDis.userId + '/term';
        console.log('url = ' + url);
        this.axios
            .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
            .post(url).then((response) => {
          let responseBody = response.data;
          console.log(responseBody);
          if (responseBody.state != 20000) {
            this.$message.error(responseBody.message);
          } else {
            this.handleDelete(knowDis);
          }
        })
      }).catch(() => {
      });
    },
    loadReqProposal(id) {
      console.log('loadReqProposal');
      let page = this.currentPage - 1;
      let url = 'http://localhost:8989/reqProposals/' + id + '/' + page + '/' + this.limits + '/list';
      console.log('url = ' + url);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.reqProposal = responseBody.data;
      });
    },
    loadReq(id) {
      console.log('loadReq');
      let url = 'http://localhost:8989/reqs/' + id + '/req';
      console.log('url = ' + url);
      this.listLoading = true;
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.ruleForm = responseBody.data;
        this.listLoading = false;
      });
    }
  },
  mounted() {
    this.id = this.$route.query.id;
    console.log(this.id);
    this.loadReq(this.id);
    this.loadReqProposal(this.id);
    this.countReqProposal(this.id);
  }
}
</script>